<template>
    <el-table-v2
      :columns="columns"
      :data="data"
      :width="700"
      :height="400"
      fixed
    />
  </template>
  
  <script lang="tsx" setup>
  import { ref } from 'vue'
  import dayjs from 'dayjs'
  import {
    ElButton,
    ElIcon,
    ElTag,
    ElTooltip,
    TableV2FixedDir,
  } from 'element-plus'
  import { Timer } from '@element-plus/icons-vue'
  
  import type { Column } from 'element-plus'
  
  let id = 0
  const dataGenerator = () => ({
    id: `random-id-${++id}`,
    name: 'Tom',
    date: '2020-10-1',
  })
  
  const columns: Column<any>[] = [
    {
      key: 'date',
      title: 'Date',
      dataKey: 'date',
      width: 150,
      fixed: TableV2FixedDir.LEFT,
      cellRenderer: ({ cellData: date }) => (
        <ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
          {
            <span class="flex items-center">
              <ElIcon class="mr-3">
                <Timer />
              </ElIcon>
              {dayjs(date).format('YYYY/MM/DD')}
            </span>
          }
        </ElTooltip>
      ),
    },
    {
      key: 'name',
      title: 'Name',
      dataKey: 'name',
      width: 150,
      align: 'center',
      cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
    },
    {
      key: 'operations',
      title: 'Operations',
      cellRenderer: () => (
        <>
          <ElButton size="small">Edit</ElButton>
          <ElButton size="small" type="danger">
            Delete
          </ElButton>
        </>
      ),
      width: 150,
      align: 'center',
    },
  ]
  
  const data = ref(Array.from({ length: 200 }).map(dataGenerator))
  </script>
  